<ion-view left-buttons="leftButtons" class="view-messages">
  <ion-nav-title>
    <span translate>MESSAGE.LIST.TITLE</span>
  </ion-nav-title>

  <ion-nav-buttons side="secondary">
    <button class="button button-icon button-clear visible-xs visible-sm"
            ng-click="showActionsPopover($event)">
      <i class="icon ion-android-more-vertical"></i>
    </button>
  </ion-nav-buttons>

  <ion-content class="padding no-padding-xs">
    <ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
                   on-refresh="refresh(true)">
    </ion-refresher>

    <!-- Buttons bar-->
    <div class="hidden-xs hidden-sm padding text-center">

      <button class="button button-stable button-small-padding icon ion-loop" ng-click="load()">
      </button>

      <button class="button button-calm icon ion-compose"
              ng-click="showNewMessageModal()">
        {{'MESSAGE.BTN_COMPOSE' | translate}}
      </button>

      <button class="button button-stable button-small-padding icon ion-android-more-vertical"
              ng-click="showActionsPopover($event)"
              title="{{'COMMON.POPOVER_ACTIONS_TITLE' | translate}}">
      </button>


    </div>

    <!-- button tabs -->
    <div class="buttons-tabs border-bottom hidden-sm hidden-xs">
      <div class="pull-right">
        <div
          class="button button-tab dark"
          title="{{'MESSAGE.LIST.INBOX' | translate}}"
          nav-transition="none"
          ng-class="{'active': type=='inbox'}"
          ui-sref="app.user_messages_lg_inbox">
          <i class="icon ion-archive"></i>
          {{'MESSAGE.LIST.INBOX' | translate}}
        </div>
        <a
          class="button button-tab ink dark"
          title="{{'MESSAGE.LIST.OUTBOX' | translate}}"
          nav-transition="none"
          ng-class="{'active': type=='outbox'}"
          ui-sref="app.user_messages_lg_outbox">
          <i class="icon ion-paper-airplane"></i>
          {{'MESSAGE.LIST.OUTBOX' | translate}}
        </a>
      </div>
    </div>

    <div class="item no-padding">
      <div class="item-input ">
        <i class="icon ion-search placeholder-icon"></i>

        <input type="text"
               class="visible-xs visible-sm"
               placeholder="{{'MESSAGE.LIST.SEARCH_HELP'|translate}}"
               ng-model="search.text"
               ng-model-options="{ debounce: 650 }"
               ng-change="doSearch()"
               on-return="doSearch()"
               select-on-click>
        <input type="text"
               class="hidden-xs hidden-sm"
               placeholder="{{'MESSAGE.LIST.SEARCH_HELP'|translate}}"
               ng-model="search.text"
               on-return="doSearch()">
        <div class="helptip-anchor-center">
          <a id="helptip-message-search-text"></a>
        </div>
      </div>
    </div>

    <div class="padding-top hidden-xs" style="display: block; height: 60px;">

      <div class="pull-left" ng-if="!search.loading">
        <ng-if ng-if="search.type=='last'">
          <h4>{{ ('MESSAGE.LIST.LAST_' + type) | upper | translate}}</h4>
        </ng-if>
        <ng-if ng-if="search.type=='text'">
          <h4 translate>COMMON.RESULTS_LIST</h4>
        </ng-if>
      </div>

      <div class="pull-right hidden-xs hidden-sm">
        <a class="button button-text button-small ink"
           ng-class="{'button-text-positive': search.type=='last'}"
           ng-click="doSearchLast()">
          <i class="icon ion-clock"></i>
          {{'MESSAGE.LIST.BTN_LAST_MESSAGES' | translate}}
        </a>

        <!-- Allow extension here -->
        <cs-extension-point name="filter-buttons"></cs-extension-point>
        &nbsp;
        <button class="button button-small button-stable ink"
                ng-click="doSearch()">
          {{'COMMON.BTN_SEARCH' | translate}}
        </button>

      </div>
    </div>

    <div class="center padding" ng-if="search.loading">
      <ion-spinner icon="android"></ion-spinner>
    </div>

    <!-- list -->
    <ng-include src="'plugins/es/templates/message/list.html'"></ng-include>

  </ion-content>

  <button id="fab-add-message-record"
          class="button button-fab button-fab-bottom-right button-assertive icon ion-compose visible-xs visible-sm spin"
          ng-click="showNewMessageModal()">
  </button>
</ion-view>
